<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <script type="text/javascript" src="../../../webjars/fw-web/main/common/vue-boot.js"></script>
</head>
<style>
    .total {
        position: relative;
        height: 600px;
    }

    .input {
        width: 180px;
        top: 10px;
        left: 40px;
    }

    .denglu {
        top: 14px;
        position: absolute;
    }

    .yonghu {
        top: 14px;
        left: 235px;
        position: absolute;
    }

    .button {
        left: 490px;
        top: 10px;
        position: absolute;
    }

    .insert {
        top: 20px;
        position: absolute
    }

    .table {
        top: 60px;
        position: absolute;
    }

    .block {
        top: 450px;
        left: 600px;
        position: absolute;
    }
</style>

<body>
<div id="app" class="total">
    <!--提示语 -->
    <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="友情提醒" name="1">
            <ul>
                <li>
                    <div class="p1">本功能用于维护当前部门所有用户信息；</div>
                </li>
                <li>
                    <div class="p2">
                        <font color="red">管理员用户可以新增用户，新增用户后，需至用户授权去给新用户分配权限，否则用户登陆后无菜单权限</font>
                    </div>
                </li>
                <li>
                    <div class="p3">管理员用户可以设置其他用户为管理员，确认切换后原有管理员没有任何权限，需由新管理员用户分配；</div>
                </li>
                <li>
                    <div class="p4">当有用户离职或有其他情况，管理员用户应停用用户，停用后该用户账号即不能再登录该部门</div>
                </li>
            </ul>
        </el-collapse-item>
    </el-collapse>
    <!--头部 -->
    <el-row>
        <el-col :span="5">
            <div class="grid-content bg-purple">
                <span style="font-size: 12px;" class="denglu">账号</span>
                <el-input size="mini" v-model="account" placeholder="请输入账号" class="input"></el-input>
            </div>
        </el-col>
        <el-col :span="19">
            <div class="grid-content bg-purple-light">
                <span style="font-size: 12px;" class="yonghu">用户名称</span>
                <el-input size="mini" v-model="username" placeholder="请输入用户名称" class="input"></el-input>
                <el-button type="primary" icon="el-icon-search" size="mini" class="button" @click="select()">查询</el-button>
            </div>
        </el-col>
    </el-row>
    <!--新增按钮 -->
    <el-row>
        <el-button type="primary" @click="create()" size="mini" class="insert">新增</el-button>
    </el-row>
    <!--表格 -->
    <el-row>
        <el-table :data="tableData" border style="width: 100%" class="table">
            <el-table-column prop="id" label="用户id" width="90px">
            </el-table-column>
            <el-table-column prop="account" label="用户账号" width="90px">
            </el-table-column>
            <el-table-column prop="username" label="用户名称">
            </el-table-column>
            <el-table-column prop="gender" label="用户性别" width="80px">
            </el-table-column>
            <el-table-column prop="phone" label="手机号" width="120px">
            </el-table-column>
            <el-table-column prop="status" label="用户状态" width="90px">
            </el-table-column>
            <el-table-column prop="createTime" label="信息创建时间" width="170px">
            </el-table-column>
            <el-table-column prop="createUserId" label="创建人id">
            </el-table-column>
            <el-table-column prop="editTime" label="信息修改时间" width="170px">
            </el-table-column>
            <el-table-column prop="editUserId" label="修改人id">
            </el-table-column>
            <el-table-column prop="deleteFlag" label="逻辑删除">
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="234px">
                <template slot-scope="scope">
                    <el-button type="text" @click="check(scope.row)">查看</el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button type="text" @click="createUpdate(scope.row)">编辑</el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
    </el-row>
    <el-row>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage4" :page-sizes="[10]" :page-size="4"
                           layout="total, sizes, prev, pager, next, jumper" :total="3">
            </el-pagination>
        </div>
    </el-row>
    <!--新增弹框 -->
    <div class="add-form">
        <el-dialog title="新增用户" :visible.sync="dialogForm">
            <el-form ref="form" :model="formData" label-width="80px">
                <el-form-item label="用户账号" prop="account">
                    <el-input v-model="formData.account"></el-input>
                </el-form-item>
                <el-form-item label="用户名称" prop="username">
                    <el-input v-model="formData.username"></el-input>
                </el-form-item>
                <el-form-item label="用户密码" prop="password">
                    <el-input v-model="formData.password"></el-input>
                </el-form-item>
                <el-form-item label="用户性别" prop="gender">
                    <el-select v-model="formData.gender" placeholder="请选择用户性别">
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="formData.phone"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd()">立即创建</el-button>
                    <el-button @click="cancel()">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
    <!--编辑弹框 -->
    <div class="update-form">
        <el-dialog title="编辑用户" :visible.sync="updateForm">
            <el-form ref="form" :model="updateData" label-width="80px">
                <el-form-item label="用户账号" prop="account">
                    <el-input v-model="updateData.account"></el-input>
                </el-form-item>
                <el-form-item label="用户名称" prop="username">
                    <el-input v-model="updateData.username"></el-input>
                </el-form-item>
                <el-form-item label="用户性别" prop="gender">
                    <el-select v-model="updateData.gender" placeholder="请选择用户性别">
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="updateData.phone"></el-input>
                </el-form-item>
                <el-form-item label="用户状态" prop="status">
                    <el-select v-model="updateData.status" placeholder="请选择用户状态">
                        <el-option label="禁用" value="1"></el-option>
                        <el-option label="启用" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleUpdate()">确定修改</el-button>
                    <el-button @click="cancel()">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
    <!--查看数据 -->
    <div class="check-form">
        <el-dialog title="查看用户" :visible.sync="checkForm">
            <el-form ref="checkform" :data="checkData" label-width="80px">
                <el-form-item label="用户账号" prop="account">
                    <el-input v-model="checkData.account" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="用户名称" prop="username">
                    <el-input v-model="checkData.username" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="用户密码" prop="password">
                    <el-input v-model="checkData.password" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="用户性别" prop="gender">
                    <el-input v-model="checkData.gender" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="checkData.phone" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="用户状态" prop="status">
                    <el-input v-model="checkData.status" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="创建时间" prop="createTime">
                    <el-input v-model="checkData.createTime" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="创建人id" prop="createUserId">
                    <el-input v-model="checkData.createUserId" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="修改时间" prop="editTime">
                    <el-input v-model="checkData.editTime" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="修改人id" prop="editUserId">
                    <el-input v-model="checkData.editUserId" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="逻辑删除" prop="deleteFlag">
                    <el-input v-model="checkData.deleteFlag" :disabled="true"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</div>
<script type="text/javascript" src="./user.js"></script>
</body>
</html>